.hosting {
	.card > .material-icon {
		display: inline-block;
		margin-right: 16px;
		margin-bottom: 16px;
		vertical-align: middle;
	}

	.card > .card-heading {
		display: inline-block;
		margin-top: 0;
		margin-bottom: 16px;
		vertical-align: middle;
		line-height: 32px;
	}

	&__layout {
		display: flex;
		flex-wrap: wrap;
	}

	&__layout-col {
		flex-basis: 100%;
	}

	@include breakpoint( '>1280px' ) {
		&__layout-col:first-child {
			box-sizing: border-box;
			flex-basis: 70%;
			padding-right: 8px;

			.card {
				padding-left: 72px;

				> .material-icon {
					display: block;
					position: absolute;
					left: 24px;
				}
			}
		}

		&__layout-col:last-child {
			box-sizing: border-box;
			flex-basis: 30%;
			padding-left: 8px;
		}
	}

	.spinner {
		width: 100%;
	}
}

.hosting__activating-notice {
	.gridicons-sync > use:first-child,
	.gridicons-sync > g:first-child {
		animation: spinning-sync-icon linear 2s infinite;
		transform-origin: center;
	}
}

@keyframes spinning-sync-icon {
	from {
		transform: rotate( 0deg );
	}
	to {
		transform: rotate( 360deg );
	}
}
